<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<article title="trip">
			<p>
				数字动画
				<span id="trip"></span>
			</p>
		</article>
		<article title="texts">
			<p>
				文本切换
				<span id="texts"></span>
			</p>
			<p>
				样式类切换
				<span id="stycs">文本</span>
				<style>
					.red {
						color: red;
						background-color: black;
					}

					.green {
						color: green;
						background-color: black;
					}

					.blue {
						color: blue;
						background-color: black;
					}
				</style>
			</p>
		</article>
		<article title="visible">
			<p>
				隐藏/显示
			</p>
			<div style="width:300px;height:50px;">
				<div id="test1" style="background-color:gray;">
					TEST1
				</div>
				<div id="test2" style="background-color:gray;">
					TEST2
				</div>
			</div>
		</article>
		<article title="scroll">
			<p>滚动</p>
			<div id="scroll" style="width:300px;height:300px;overflow:auto;background-color:black;">
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">01</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">02</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">03</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">04</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">05</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">06</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">07</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">08</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">09</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">20</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">21</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">22</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">23</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">24</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">25</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">26</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">27</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">28</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">29</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">30</div>
			</div>
		</article>
		<article title="toggle">
			<p>
				切换
			</p>
			<div id="toggle" style="width:300px;height:300px;overflow:auto;background-color:black;">
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">01</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">02</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">03</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">04</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">05</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">06</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">07</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">08</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">09</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">20</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">21</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">22</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">23</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">24</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">25</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">26</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">27</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">28</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">29</div>
				<div style="background-color: rgba(255, 255, 255, 0.5);padding:10px;margin:1px;">30</div>
			</div>
		</article>
	</body>
	<script type="module">
		import animate from './index.js';

		// trip
		setInterval(function() {
			const span = document.getElementById("trip");
			const value = Math.floor(Math.random() * 1000) + 1;
			animate.trip(span, value);
		}, 3000);

		// texts
		animate.texts("texts", ["J", "O", "Y", "Z", "L"]);
		animate.classes("stycs", ["red", "green", "blue"]);

		// visible
		let visible = true;
		setInterval(function() {
			if (visible) {
				visible = false;
				animate.hide("test1", true, false);
				animate.hide("test2", false, true);
			} else {
				visible = true;
				animate.show("test1", true, false);
				animate.show("test2", false, true);
			}
		}, 2000);

		// scroll
		animate.scroll("scroll");
		animate.scroll("scroll");

		// toggle
		animate.toggle("toggle", 3);
		// animate.toggle("toggle", 0);
	</script>
</html>